<template>
  <div class="paper-container">
    <div class="paper-header">
      <h2>毕业论文管理系统</h2>
      <p>集中展示论文相关信息与成果</p>
    </div>

    <!-- 用户个人信息板块 -->
    <el-card class="info-card user-info-card">
      <div class="card-header">
        <i class="el-icon-user-solid"></i>
        <span>用户个人信息</span>
      </div>
      <div class="user-info-content">
        <div class="user-avatar">
          <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="avatar-img">
        </div>
        <div class="user-details">
          <div class="info-item">
            <label>姓名：</label>
            <span>{{ userInfo.name || '未知' }}</span>
          </div>
          <div class="info-item">
            <label>学号：</label>
            <span>{{ userInfo.studentId || '未知' }}</span>
          </div>
          <div class="info-item">
            <label>专业：</label>
            <span>{{ userInfo.major || '未知' }}</span>
          </div>
          <div class="info-item">
            <label>班级：</label>
            <span>{{ userInfo.className || '未知' }}</span>
          </div>
          <div class="info-item">
            <label>联系方式：</label>
            <span>{{ userInfo.contact || '未知' }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <div class="paper-content">
      <!-- 毕业论文基本信息展示区 -->
      <el-card class="info-card paper-basic-card">
        <div class="card-header">
          <i class="el-icon-document"></i>
          <span>毕业论文基本信息</span>
        </div>
        <div class="paper-basic-content">
          <div class="basic-info-grid">
            <div class="info-item">
              <label>论文题目：</label>
              <span>{{ paperBasicInfo.title || '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>指导老师：</label>
              <span>{{ paperBasicInfo.teacher || '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>论文类型：</label>
              <span>{{ paperBasicInfo.type || '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>提交日期：</label>
              <span>{{ paperBasicInfo.submitDate || '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>论文状态：</label>
              <el-tag :type="getStatusType(paperBasicInfo.status)">{{ paperBasicInfo.status || '未设置' }}</el-tag>
            </div>
            <div class="info-item">
              <label>成绩：</label>
              <span>{{ paperBasicInfo.score || '未评定' }}</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 毕业论文成果详细介绍模块 -->
      <el-card class="info-card paper-detail-card">
        <div class="card-header">
          <i class="el-icon-star"></i>
          <span>毕业论文成果详细介绍</span>
        </div>
        <div class="paper-detail-content">
          <el-collapse>
            <el-collapse-item title="研究背景">
              <div class="detail-section">
                {{ paperDetailInfo.background || '暂无研究背景信息' }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="研究目的">
              <div class="detail-section">
                {{ paperDetailInfo.purpose || '暂无研究目的信息' }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="研究方法">
              <div class="detail-section">
                {{ paperDetailInfo.methodology || '暂无研究方法信息' }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="主要研究成果">
              <div class="detail-section">
                {{ paperDetailInfo.results || '暂无研究成果信息' }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="创新点">
              <div class="detail-section">
                {{ paperDetailInfo.innovations || '暂无创新点信息' }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="关键词">
              <div class="detail-section">
                <el-tag v-for="tag in paperDetailInfo.keywords" :key="tag" class="keyword-tag">
                  {{ tag }}
                </el-tag>
                <span v-if="!paperDetailInfo.keywords || paperDetailInfo.keywords.length === 0">暂无关键词</span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PaperIndex',
  data() {
    return {
      defaultAvatar: require('@/assets/images/profile.jpg'),
      userInfo: {
        // 模拟数据
        name: '林金祥',
        studentId: '116420220038',
        major: '数据科学与大数据技术',
        className: '数据科学与大数据技术2201班',
        contact: '13800138000'
      },
      paperBasicInfo: {
        // 模拟数据
        title: '基于深度学习的天气预测系统的实现与设计',
        teacher: '李教授',
        type: '学术论文',
        submitDate: '2024-05-20',
        status: '已完成',
        score: '优秀'
      },
      paperDetailInfo: {
        // 模拟数据
        background: '随着人工智能技术的快速发展，自然语言处理技术在智能客服领域的应用越来越广泛。传统的客服系统存在响应慢、准确率低等问题，无法满足用户日益增长的需求。因此，研究如何利用深度学习技术提升智能客服系统的性能具有重要的现实意义。',
        purpose: '本研究旨在探索基于深度学习的自然语言处理技术在智能客服中的应用方法，提高客服系统的响应速度和准确率，为企业提供更高效的客户服务解决方案。',
        methodology: '本研究采用了以下方法：1. 收集和预处理大量的客服对话数据；2. 构建基于BERT模型的对话理解系统；3. 设计基于Transformer的对话生成模块；4. 进行系统集成和性能测试；5. 对比分析不同模型的性能表现。',
        results: '研究结果表明，基于深度学习的智能客服系统在响应准确率上达到了92.5%，比传统方法提高了约15个百分点；平均响应时间缩短至0.8秒，用户满意度评分达到4.8分（满分5分）。系统已在某大型电商平台进行试点应用，取得了良好的效果。',
        innovations: '本研究的主要创新点包括：1. 提出了一种结合上下文理解的多轮对话处理模型；2. 设计了基于用户画像的个性化回复生成算法；3. 开发了一套自适应学习机制，能够根据用户反馈不断优化系统性能。',
        keywords: ['深度学习', '自然语言处理', '智能客服', 'BERT', 'Transformer']
      }
    }
  },
  methods: {
    getStatusType(status) {
      switch (status) {
        case '已完成':
          return 'success'
        case '进行中':
          return 'primary'
        case '待提交':
          return 'warning'
        case '已驳回':
          return 'danger'
        default:
          return 'info'
      }
    }
  }
}
</script>

<style scoped>
.paper-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.paper-header {
  text-align: center;
  margin-bottom: 30px;
}

.paper-header h2 {
  color: #1890ff;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
}

.paper-header p {
  color: #606266;
  font-size: 16px;
}

.info-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebeef5;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.card-header i {
  margin-right: 8px;
  color: #1890ff;
  font-size: 18px;
}

/* 用户信息样式 */
.user-info-content {
  display: flex;
  padding: 20px;
}

.user-avatar {
  margin-right: 30px;
}

.avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #f0f0f0;
}

.user-details {
  flex: 1;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.info-item label {
  width: 100px;
  color: #606266;
  font-weight: 500;
}

.info-item span {
  color: #303133;
}

/* 论文内容布局 */
.paper-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 论文基本信息样式 */
.paper-basic-content {
  padding: 20px;
}

.basic-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* 论文详细信息样式 */
.paper-detail-content {
  padding: 20px;
}

.detail-section {
  line-height: 1.8;
  color: #303133;
  text-align: justify;
}

.keyword-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-info-content {
    flex-direction: column;
    align-items: center;
  }
  
  .user-avatar {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .user-details {
    width: 100%;
  }
  
  .paper-content {
    grid-template-columns: 1fr;
  }
  
  .basic-info-grid {
    grid-template-columns: 1fr;
  }
}
</style>